<template>
  <AuthLayout
    title="Join Hustle"
    subtitle="Create your account"
    linkText="Already have an account?"
    linkLabel="Sign in"
    linkTo="/signin"
  >
        <form @submit.prevent="handleSubmit" class="space-y-6">
          <div>
            <label for="name" class="block text-sm font-medium text-gray-700 ">
              Full name
            </label>
            <div class="mt-2">
              <input 
                v-model="form.name"
                id="name" 
                name="name" 
                type="text" 
                autocomplete="name" 
                required 
                class="appearance-none block w-full px-4 py-3 border border-gray-300  rounded-xl placeholder-gray-400  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white  text-gray-900  sm:text-sm transition-all duration-200"
                placeholder="Enter your full name"
              />
            </div>
          </div>

          <div>
            <label for="email" class="block text-sm font-medium text-gray-700 ">
              Email address
            </label>
            <div class="mt-2">
              <input 
                v-model="form.email"
                id="email" 
                name="email" 
                type="email" 
                autocomplete="email" 
                required 
                class="appearance-none block w-full px-4 py-3 border border-gray-300  rounded-xl placeholder-gray-400  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white  text-gray-900  sm:text-sm transition-all duration-200"
                placeholder="Enter your email"
              />
            </div>
          </div>

          <div>
            <label for="password" class="block text-sm font-medium text-gray-700 ">
              Password
            </label>
            <div class="mt-2">
              <input 
                v-model="form.password"
                id="password" 
                name="password" 
                type="password" 
                autocomplete="new-password" 
                required 
                class="appearance-none block w-full px-4 py-3 border border-gray-300  rounded-xl placeholder-gray-400  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white  text-gray-900  sm:text-sm transition-all duration-200"
                placeholder="Create a password"
              />
            </div>
          </div>

          <div>
            <label for="confirm-password" class="block text-sm font-medium text-gray-700 ">
              Confirm password
            </label>
            <div class="mt-2">
              <input 
                v-model="form.confirmPassword"
                id="confirm-password" 
                name="confirm-password" 
                type="password" 
                autocomplete="new-password" 
                required 
                class="appearance-none block w-full px-4 py-3 border border-gray-300  rounded-xl placeholder-gray-400  focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white  text-gray-900  sm:text-sm transition-all duration-200"
                placeholder="Confirm your password"
              />
            </div>
          </div>

          <div class="flex items-center">
            <input 
              v-model="form.agreeToTerms"
              id="agree-to-terms" 
              name="agree-to-terms" 
              type="checkbox" 
              required
              class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300  rounded focus:ring-0 focus:outline-none"
            />
            <label for="agree-to-terms" class="ml-2 block text-sm text-gray-900 ">
              I agree to the
              <a href="#" class="text-blue-600 hover:text-blue-500  ">Terms of Service</a>
              and
              <a href="#" class="text-blue-600 hover:text-blue-500  ">Privacy Policy</a>
            </label>
          </div>

          <div>
            <button 
              type="submit"
              :disabled="isLoading || !isFormValid"
              class="w-full flex justify-center py-3 px-4 border border-transparent rounded-xl shadow-lg text-sm font-semibold text-white bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200 transform hover:scale-105"
            >
              {{ isLoading ? 'Creating account...' : 'Create account' }}
            </button>
          </div>
        </form>

        <div class="mt-8">
          <div class="relative">
            <div class="absolute inset-0 flex items-center">
              <div class="w-full border-t border-gray-300 " />
            </div>
            <div class="relative flex justify-center text-sm">
              <span class="px-3 bg-white/80  text-gray-500 ">Or continue with</span>
            </div>
          </div>

          <div class="mt-6 grid grid-cols-2 gap-4">
            <button class="w-full inline-flex justify-center py-3 px-4 border border-gray-300  rounded-xl shadow-sm bg-white  text-sm font-medium text-gray-500  hover:bg-gray-50  transition-all duration-200">
              <svg class="w-5 h-5" viewBox="0 0 24 24">
                <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
              </svg>
              <span class="ml-2">Google</span>
            </button>

            <button class="w-full inline-flex justify-center py-3 px-4 border border-gray-300  rounded-xl shadow-sm bg-white  text-sm font-medium text-gray-500  hover:bg-gray-50  transition-all duration-200">
              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
                <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
              </svg>
              <span class="ml-2">Twitter</span>
            </button>
          </div>
        </div>
  </AuthLayout>
</template>

<script setup lang="ts">
  import { ref, reactive, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { useAuthStore } from '../stores/auth'
  import AuthLayout from '../components/layout/AuthLayout.vue'

  const router = useRouter()
  const authStore = useAuthStore()

  // State
  const isLoading = ref(false)

  const form = reactive({
    name: '',
    email: '',
    password: '',
    confirmPassword: '',
    agreeToTerms: false
  })

  // Computed
  const isFormValid = computed(() => {
    return form.name &&
      form.email &&
      form.password &&
      form.confirmPassword &&
      form.password === form.confirmPassword &&
      form.agreeToTerms
  })

  // Methods
  const handleSubmit = async () => {
    if (!isFormValid.value) return

    isLoading.value = true
    try {
      const result = await authStore.register(form.email, form.password, form.name)
      if (result.success) {
        router.push('/dashboard')
      } else {
        // TODO: Show error message
        console.error('Registration failed:', result.error)
      }
    } catch (error) {
      console.error('Registration error:', error)
    } finally {
      isLoading.value = false
    }
  }
</script>
